<#escape x as x?html>
<!DOCTYPE html>
<html>
    <@y.htmlHead></@>
<body>
<div class="main">
    <!--header-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-3 col-lg-2">
            <img src="${assetsPath}/img/demo/logo.png"/>
        </div>
        <div class="col-md-4 col-lg-4" style="padding-top: 10px;">
            <div class="btn-group" style="float: left;color: #999999;min-width: 120px;">
                <select id="roleSelect" class="form-control select2"
                        data-url="${contextPath}/sys/applicationCategory/rest/findAll"
                        data-value="${(record.categoryId)!}"
                        data-key="id"
                        name="categoryId" data-placeholder="搜索应用">
                </select>
            </div>
            <div class="input-group">
                <input type="text" id="appSearch" class="form-control"
                       style="background-color:white;border-left: none;border-right: none;"/>
                <span class="input-group-addon"
                      style="background-color: #49A6DB;cursor:pointer;"
                      id="searchBtn">
                    <i class="glyphicon glyphicon-search" style="color:white;"></i></span>
            </div>
        </div>
        <div class="col-md-5 col-lg-4" style="padding-top: 10px;">
            <#if isLogin>
                <div class="pull-right" style="margin-top: 5px;">
                    <span style="color: #337AC4;margin-right: 10px;">${userName!''}</span>
                    <button type="button" class="btn btn-link pull-right"
                            style="outline: none;font-size: 14px;color: black;margin-top: -7px;"
                            onclick="window.location.href='/logout'">
                        登出
                    </button>
                </div>
            <#else>
                <button type="button" class="btn btn-link pull-right"
                        style="outline: none;font-size: 14px;color: black;padding-right: 0px;"
                        onclick="window.location.href='/login'">登录
                </button>
            </#if>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--第二行tab选项卡-->
    <div class="row" style="margin: 5px;background-color: #466eb7">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-6 col-lg-4">
            <ul class="nav navbar-nav" style="margin-left: -5px;">
                <li style="background-color: #49A6DB">
                    <a href="/app" style="color:white;font-size: 18px;">首页</a>
                </li>
                <li style="<#if !isLogin>display:none</#if>">
                    <a href="/myApp/index" style="color:white;font-size: 18px;">我的应用</a>
                </li>
                <li style="<#if !isLogin>display:none</#if>">
                    <a href="/myApp/favoriteIndex" style="color:white;font-size: 18px;">我的收藏</a>
                </li>
            </ul>
        </div>
        <div class="col-md-6 col-lg-7">
        </div>
    </div>
    <!--应用分类-->
    <div class="row" style="margin: 5px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-3 col-lg-2">
            <table class="table">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用分类</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
                </tr>
                <tbody>
                    <#if (categories??)&&(categories?size>0)>
                        <#list categories?values as value>
                        <tr>
                            <#list value as category>
                                <td style="border-top: none;" title="${category.name!''}"><a class="classify"
                                                                                             href="/app/classify?id=${category.id!''}"
                                                                                             style="color: black;font-size: 16px;">${category.name!''}</a>
                                </td>
                            </#list>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>

            <table class="table">
                <thead>
                <p style="margin-left: 10px;font-size: 16px;font-weight:bold;margin-top: 20px;">应用排行</p>
                <hr color="blue" width="100%"
                    style="border-top: 2px solid;color: #dadada;margin-top: 10px;margin-bottom: 0px;"/>
                </thead>
                <tbody>
                    <#if (top10??)&&(top10?size>0)>
                        <#list top10 as app>
                        <tr id="${app.id!''}" class="sumary">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;<#if app_index<3>color: #eb853a;</#if> padding-bottom: 0px;font-size: 16px;">
                            ${app_index+1}
                            </td>
                            <td style="border-top: none;padding-bottom: 0px;font-size: 16px;<#if app_index<3>color: #eb853a;</#if>">${app.name!''}</td>
                        </tr>
                        <tr id="${app.id!''}_detail" style="display: none">
                            <td style="padding-left: 10px;width: 10px;border: 0px none;"></td>
                            <td style="border: 0px none;"><img src="resource/app/${app.pic!'app_default.png'}"
                                                               style="margin-top: 5px;border-radius: 0;margin-right: 20px;float: left;"
                                                               alt="User Image">
                                <p style="font-weight: bold;line-height: 20px;margin: 2px;">${app.name!''}</p>
                                <p style="line-height: 20px;margin-top: 8px;margin-bottom: 0px;"><i
                                        class="fa fa-rss text-primary" reset
                                        title="订阅"></i>&nbsp;${app.subscribeCount!''}次订阅
                                </p>
                                <input class="rating-input-small" value="${app.star!''}" type="number">
                                </p>
                            </td>
                        </tr>
                        </#list>
                    </#if>
                </tbody>
            </table>
        </div>
        <div class="col-md-9 col-lg-8">
            <!-- 轮播 -->
            <div id="myCarousel" class="carousel slide" style="margin-top: 20px;">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <#if (banners??)&&(banners?size>0)>
                        <#list banners as banner>
                            <li data-target="#myCarousel" data-slide-to="${banner_index!''}"
                                class="<#if banner_index==0>active</#if>"></li>
                        </#list>
                    </#if>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <#if (banners??)&&(banners?size>0)>
                        <#list banners as banner>
                            <div class="<#if banner_index==0>item active<#else>item</#if>">
                                <a href="/app/toBanner?id=${banner.id!''}">
                                    <img src="resource/banner/${banner.pic!''}" alt="First slide"
                                         style="width: 100%;height: 300px;"></a>
                                <div class="carousel-caption">${banner.name!''}</div>
                            </div>
                        </#list>
                    </#if>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
            <!-- 常见应用 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #4c59bd;border-bottom: 2px solid #4c59bd;">
                        常见应用
                    </th>
                </tr>
                </thead>
            </table>
            <ul class="users-list clearfix common">
                <#if (commonApps??)&&(commonApps?size>0)>
                    <#list commonApps as commonApp>
                        <li id="${commonApp.id!''}_common_md" appId="${commonApp.id!''}" class="sumary hidden-lg-fusion"
                            style="width:30%;height: 200px;background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((commonApp_index+1)%3)!=1>margin-left: 2.5%;</#if><#if ((commonApp_index+1)%3)!=0>margin-right: 2.5%;</#if>margin-top: 15px;margin-bottom: 15px;">
                            <img src="/resource/app/${commonApp.pic!'app_default.png'}" alt="User Image"
                                 style="border-radius: 0;margin-top: 5px;">
                            <a class="users-list-name" style="margin: 10px;font-size: 16px;">${commonApp.name!''}</a>
                            <span class="users-list-date"
                                  style="margin: 5px;font-size: 12px;">${commonApp.category!''}</span>
                            <span class="users-list-date" style="margin: 5px;font-size: 12px;"><i
                                    class="fa fa-rss text-primary"
                                    reset
                                    title="订阅"></i>&nbsp;${commonApp.subscribeCount!''}次订阅</span>
                            <span class="users-list-date"
                                  style="margin: 5px;font-size: 12px;">${commonApp.publishTime!''}
                                发布</span>
                        </li>
                        <li id="${commonApp.id!''}_common_md_detail" class="hidden-lg-fusion" appId="${commonApp.id!''}"
                            style="display: none;width:30%;height: 200px;background-color: #466eb7;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((commonApp_index+1)%3)!=1>margin-left: 2.5%;</#if><#if ((commonApp_index+1)%3)!=0>margin-right: 2.5%;</#if>margin-top: 15px;margin-bottom: 15px;">
                            <a class="users-list-name" style="font-size: 16px;color: white;">${commonApp.name!''}</a>
                            <hr style="width:90%;border-top: 2px solid;margin-bottom:10px;margin-top:10px;color: #264f99"/>
                            <span class="users-list-date"
                                  style="text-overflow: ellipsis;height: 85px;overflow: hidden;text-align: left;color: white;font-size: 12px;width: 90%;margin-left: 5%;">${commonApp.desc!''}</span>
                            <span class="info-box-text" style="margin-top: 5px;">
                             <input class="rating-input-middle" value="${commonApp.star!''}" type="number">
                             </span>
                        </li>
                        <li id="${commonApp.id!''}_common_lg" appId="${commonApp.id!''}" class="sumary hidden-md-fusion"
                            style="width:22%;height: 250px;background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((commonApp_index+1)%4)!=1>margin-left: 2%;</#if><#if ((commonApp_index+1)%4)!=0>margin-right: 2%;</#if>margin-top: 15px;margin-bottom: 15px;">
                            <img src="/resource/app/${commonApp.pic!''}" alt="User Image"
                                 style="border-radius: 0;margin-top: 20px;">
                            <a class="users-list-name" style="margin: 10px;font-size: 18px;">${commonApp.name!''}</a>
                            <span class="users-list-date"
                                  style="margin: 5px;font-size: 14px;">${commonApp.category!''}</span>
                            <span class="users-list-date" style="margin: 5px;font-size: 14px;"><i
                                    class="fa fa-rss text-primary"
                                    reset
                                    title="订阅"></i>&nbsp;${commonApp.subscribeCount!''}次订阅</span>
                            <span class="users-list-date"
                                  style="margin: 5px;font-size: 14px;">${commonApp.publishTime!''}
                                发布</span>
                        </li>
                        <li id="${commonApp.id!''}_common_lg_detail" class="hidden-md-fusion" appId="${commonApp.id!''}"
                            style="display: none;width:22%;height: 250px;background-color: #466eb7;border: 1px solid #c2c2c2;border-radius: 5px;<#if ((commonApp_index+1)%4)!=1>margin-left: 2%;</#if><#if ((commonApp_index+1)%4)!=0>margin-right: 2%;</#if>margin-top: 15px;margin-bottom: 15px;">
                            <a class="users-list-name" style="font-size: 18px;color: white;">${commonApp.name!''}</a>
                            <hr style="width:90%;border-top: 2px solid;color: #264f99"/>
                            <span class="users-list-date"
                                  style="text-overflow: ellipsis;height: 100px;overflow: hidden;text-align: left;color: white;font-size: 14px;width: 90%;margin-left: 5%;">${commonApp.desc!''}</span>
                            <span class="info-box-text" style="margin-top: 10px;">
                             <input class="rating-input-middle" value="${commonApp.star!''}" type="number">
                             </span>
                        </li>
                    </#list>
                </#if>
            </ul>
            <!-- 精品推荐 -->
            <div class="row" style="margin-left: 0px;margin-right: 0px;margin-top: 20px;">
                <div class="col-md-5 col-lg-6" style="padding-left: 0px;padding-right: 0px;">
                    <hr style="border-top: 2px solid;color: #ebebeb"/>
                </div>
                <div class="col-md-2 col-lg-1"
                     style="padding-left: 0px;padding-right: 0px;padding-top: 10px;text-align: center;">
                    <span style="margin-top: 10px;font-size: 16px;color:#999999;font-weight:bold;">精品推荐</span>
                </div>
                <div class="col-md-5 col-lg-5" style="padding-left: 0px;padding-right: 0px;">
                    <hr style="border-top: 2px solid;color: #ebebeb"/>
                </div>
            </div>
            <div class="row">
                <#if (recommendApps??)&&(recommendApps?size>0)>
                    <#list recommendApps as recommendApp>
                        <div class="col-lg-3 hidden-md-fusion" title="${recommendApp.name!''}">
                            <a href="/app/detail?id=${recommendApp.id!''}">
                                <div class="info-box"
                                     style="background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;">
                            <span class="info-box-icon" style="background-color: transparent;margin-left: 20px;"><img
                                    src="resource/app/${recommendApp.pic!'app_default.png'}" style="margin-top: -10px;"
                                    alt="User Image"></span>
                                    <div class="info-box-content" style="padding-top: 20px;margin-left: 120px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;color: black;">${recommendApp.name!''}</span>
                                        <span class="info-box-text"
                                              style="font-size: 12px;color:#999999;margin-top: 20px;">${recommendApp.category!''}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-3 hidden-lg-fusion" title="${recommendApp.name!''}">
                            <a href="/app/detail?id=${recommendApp.id!''}">
                                <div class="info-box"
                                     style="background-color: #eeeeee;border: 1px solid #c2c2c2;border-radius: 5px;">
                            <span class="info-box-icon" style="background-color: transparent;margin-left: 5px;"><img
                                    src="resource/app/${recommendApp.pic!''}" style="margin-top: -10px;"
                                    alt="User Image"></span>
                                    <div class="info-box-content" style="padding-top: 20px;margin-left: 80px;">
                                    <span class="info-box-text"
                                          style="font-weight:bold;color: black;">${recommendApp.name!''}</span>
                                        <span class="info-box-text"
                                              style="font-size: 12px;color:#999999;margin-top: 20px;">${recommendApp.category!''}</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </#list>
                </#if>
            </div>
            <!-- 热门应用 -->
            <table class="table" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th style="font-size: 18px;color: #289c2e;border-bottom: 2px solid #289c2e;">
                        热门应用
                    </th>
                </tr>
                </thead>
            </table>
            <ul class="users-list clearfix hot">
                <#if (hot??)&&(hot?size>0)>
                    <#list hot as hotApp>
                        <li style="width:20%; padding:0px;" appId="${hotApp.id!''}" title="${hotApp.name!''}"
                            class="hidden-lg-fusion">
                            <img src="resource/app/${hotApp.pic!'app_default.png'}" alt="User Image"
                                 style="border-radius: 0;padding-top: 5px;">
                            <a class="users-list-name" style="margin-top: 10px;">${hotApp.name!''}</a>
                            <span class="users-list-date"
                                  style="margin-top: 5px;margin-bottom:5px">${hotApp.category!''}</span>
                        </li>
                        <li style="width:12.5%; padding:20px;" appId="${hotApp.id!''}" title="${hotApp.name!''}"
                            class="hidden-md-fusion">
                            <img src="resource/app/${hotApp.pic!''}" alt="User Image"
                                 style="border-radius: 0;padding-top: 5px;">
                            <a class="users-list-name" style="margin-top: 10px;">${hotApp.name!''}</a>
                            <span class="users-list-date"
                                  style="margin-top: 5px;margin-bottom:5px">${hotApp.category!''}</span>
                        </li>
                    </#list>
                </#if>
            </ul>
        </div>
        <div class="col-md-0 col-lg-1"></div>
    </div>
    <!--footer-->
    <div class="row" style="margin-bottom: 25px;">
        <div class="col-md-0 col-lg-1"></div>
        <div class="col-md-12 hidden-lg-fusion">
            <@y.apphtmlCopyright4Short></@>
        </div>
        <div class="col-lg-10 hidden-md-fusion">
            <@y.apphtmlCopyright></@>
        </div>
        <div class="col-md-0 col-lg-1">
        </div>
    </div>
</body>
<style>
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: white;
        background-color: #31579c;
    }
</style>
<script>
    var config = {
        paths: {
            index: 'assets/modules/app/index'
        }
    };
    context.call(config, [
        "index"
    ], function (index) {
        index.init();
    })
</script>
</html>
</#escape>